<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>第1讲  Vue.js 介绍、快速开始</title>

		<script src="public/vue.js"></script>

		<style>
			body{
				padding: 20px 50px;
			}
			.titleColor {
				color: red;
				font-size: 24px;
				font-weight: bolder;
				margin-bottom: 30px;
			}
		</style>
	</head>
	<body>

		<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&第1个&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
		<div id="app">
			<span class="titleColor">
				第1个（ 声明式渲染 ）:
			</span> 
			<br/>{{ message }}			
		</div><br/>

		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					message: ' Hello Vue!'
				}
			}) 
		</script>

		<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&第2个&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
		<div id="app2">
			<span class="titleColor">
				第2个（ 绑定 DOM 元素属性v-bind: ）:
			</span> 
			<br/>
			<span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
		</div><br/>

		<script type="text/javascript">
			var app2 = new Vue({
				el: '#app2',
				data: {
					message: ' 我的邮箱gangshao2016@gmail.com '
				}
			}) 
		</script>


		<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&第3个&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
		<div id="app3">
			<span class="titleColor">
				第3个（ 条件 v-if~控制切换一个元素的显示 ）:
			</span> 
			<br/>
			<span v-if="message"> 如果message为true显示当前行 、false隐藏当前行</span>
		</div><br/>

		<script type="text/javascript">
			var app3 = new Vue({
				el: '#app3',
				data: {
					message: true
				}
			}) 
		</script>

		<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&第4个&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
		<div id="app4"> 
			<span class="titleColor">
				第4个 ( 循环 v-for ) ：
			</span>
			<br/>

			<ul>
				<li v-for="todo in todos">{{todo.content}}</li>
			</ul>			
		</div><br/>

		<script type="text/javascript">
			var app4 = new Vue({
				el:"#app4",
				data:{
					todos:[
						{content: '水果'},
						{content: '蔬菜'},
						{content: '海鲜产品'},
						{content: '肉禽动物'},
						{content: '小米笔记本'}
					]
				}

			});
		</script>

		<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&第5个&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
		<div id="app5"> 
			<span class="titleColor">
				第5个 (绑定点击事件 v-on 事件： click、dblclick、change、keyup、keydown、mouseover.......) ：
			</span>
			<br/>

			<p>一个打印机的列子：{{message}}</p>	
			<input type="text" v-on:keyup = "inps" ref="input1" style="width: 500px;"/>
		</div><br/>

		<script type="text/javascript">
			var app5 = new Vue({
				el:"#app5",
				data:{
					message: 'Hello Vue.js!'
				},
				methods:{
					inps:function(){
						this.message = this.$refs.input1.value;
					}
				}

			});
		</script>
		

		<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&第6个&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
		<div id="app6"> 
			<span class="titleColor">
				第6个 (v-model 指令,它能轻松实现表单输入和应用状态之间的双向绑定.......) ：
			</span>
			<br/>

			<p>{{message}}</p>	
			<input type="text" v-model="message"   style="width: 500px;"/>
		</div><br/>

		<script type="text/javascript">
			var app6 = new Vue({
				el:"#app6",
				data:{
					message: 'Hello Vue.js!'
				}				
			});
		</script>

	</body>
</html>




















































